<template>
    <table-view :show-block-control="false">
        <el-form ref="form" :model="form" label-width="80px" :inline="true" slot="formSlot">
            <el-form-item label="菜单" prop="name">
                <el-input v-model="form.name" size="small"></el-input>
            </el-form-item>
        </el-form>

        <div slot="btnBeforeSlot">
            <el-button type="info" plain icon="el-icon-document-add" size="small" @click="handleAdd">新增</el-button>
        </div>
        <div slot = "btnAfterSlot">
            <el-button type="info" plain icon="el-icon-search" size="small" @click="handleSearch">查询</el-button>
            <el-button type="info" plain icon="el-icon-s-release" size="small" @click="handleRest">重置</el-button>
        </div>

        <div slot="tableSlot">
            <el-table
                    :data="tableData"
                    border
                    stripe
                    size="small"
                    width="100%">
                <el-table-column
                        prop="createTime"
                        label="创建时间"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="updateTime"
                        label="更新时间"
                        width="180">
                </el-table-column>
                <el-table-column
                        label="操作"
                        fixed="right">
                    <template slot-scope="scope">
                        <el-button type="info" plain size="mini"  icon="el-icon-search" @click="handleView(scope.row)">查看</el-button>
                        <el-button type="primary" plain size="mini"icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button type="danger" plain size="mini" icon="el-icon-delete"  @click="handleDel(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>


        <div slot="otherSlot">
            <tmp-add v-if ="dialog.visible.add"></tmp-add>
            <tmp-edit v-if ="dialog.visible.edit" :curData="dialog.param.data"></tmp-edit>
        </div>
    </table-view>
</template>

<script>
    import TableView from '@/components/tableView'
    import TmpAdd from './add'// 修改
    import TmpEdit from './edit'// 修改
    export default {
        name: "Tmp",// 修改
        data() {
            return{
                form: {
                    name: ''
                },
                tableData: [],
                dialog: {
                    visible: {
                        add: false,
                        edit: false,
                        view: false
                    },
                    param:{
                        data: {}
                    }
                }
            }
        },
        components: {
            TableView,
            TmpAdd,
            TmpEdit
        },
        methods: {
            handleSearch() {
            },
            handleRest() {
                this.$refs.form.resetFields();
            },
            handleView(row) {
                this.dialog.visible.view = !this.dialog.visible.view;
                this.dialog.param.data = {...row};
            },
            handleAdd() {
                this.dialog.visible.add = !this.dialog.visible.add;
            },
            handleEdit(row) {
                this.dialog.visible.edit = !this.dialog.visible.edit;
                this.dialog.param.data = {...row};
            },
            handleDel(row) {

            }
        },
        mounted() {
        }
    }
</script>

<style scoped lang="less">

</style>